<template>
	<view class="progressList">
		<navBar isBack backColor="#fff" background="transparent"></navBar>
		<view class="topBg">
			<image :src="`${baseImg}/static/constr/progressBg.png`" mode=""></image>
			<view class="topInfo">
				<view class="title">
					<view class="title_top">
						已开工{{$utils.getDaysAndHours(progInfo.build_start_time*1000)>0?$utils.getDaysAndHours(progInfo.build_start_time*1000):$utils.getDaysAndHours(progInfo.build_start_time*1000)*-1}}天
						<image :src="`${baseImg}/static/constr/zhuanfa.png`" mode=""></image>
					</view>
					<p>计划工期 {{$utils.getDaysAndHours(progInfo.build_end_time*1000,progInfo.build_start_time*1000)}} 天 | {{$moment(progInfo.build_start_time*1000).format('yyyy-MM-DD')}} 至 {{$moment(progInfo.build_end_time*1000).format('yyyy-MM-DD')}}</p>
				</view>
				<view class="progress">
					 <progress stroke-width="16" backgroundColor="#fff" activeColor="#F8CF48" border-radius="20" :percent="progInfo.progress_node_rate.toFixed(2)" show-info />
				</view>
			</view>
		</view>
		
			<view class="content" :style="'margin-top:'+navHeight+'rpx;'">
				<view class="step">
					施工节点进度
					<view>{{progInfo.progress_node_finish}}<span>/{{progInfo.progress_node_all}}</span></view>
				</view>
				<view class="stepProgress">
					<view class="left">
						<uni-steps direction="column" active-color="#8BC37A" :active="activeNum" :options="numList"></uni-steps>
					</view>
					<view class="right">
						<button :disabled="item.status==1||item.status==2" @click="toBecome(item.id,item.status)" class="btn" :style="item.status==1?'background:#E6E6E6;border-color:#E6E6E6;':''" :class="{'active':item.status==2}" type="default" v-for="(item,index) in progList" :key="index">{{item.status==1?'待确认':item.status==2?'已完工':'待完工'}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_constr from '@/service/constr.js';
	// import UniSteps from '../../components/uni-steps/uni-steps.vue'
	export default{
		// components:{
		// 	UniSteps
		// },
		data(){
			return{
				baseImg:this.$static,
				navHeight:200,
				progInfo:{},
				order_id:null,
				numList: [],
				activeNum:0,
				progList:[]
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.navHeight = 470 - Number(this.$store.state.system.navBarHeight)*2
			this.getProgList()
		},
		methods:{
			getProgList(){
				this.numList = []
				service_constr.getProgressList({order_id:this.order_id}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.progInfo = res.data?res.data:{};
						this.progList = res.data.progress?res.data.progress:[]
						this.activeNum = res.data.progress.length
						if(res.data.progress.length){
							res.data.progress.map(item=>{
								let compTime = item.complete_time?this.$utils.getFormatDate(item.complete_time*1000,'yyyy-MM-dd'):''
								let expecTime = item.expect_time?this.$utils.getFormatDate(item.expect_time*1000,'yyyy-MM-dd'):''
								let obj ={
									title:item.name?item.name:'',
									content:item.target?item.target:'',
									desc:item.status==2?'完成时间：'+compTime:'预计时间：'+expecTime
								}
								this.numList.push(obj)
							})
						}else{
							this.numList = []
						}
						
					}
				})
			},
			
			// 按钮
			toBecome(id,status){
				uni.showModal({
					title:'提示',
					content:'确认完成后，状态将不可再更改！',
					// confirmText:'确定',
					// cancelText:'取消',
					success:res=> {
						if(res.confirm){
							let sta = status==0?1:0
							service_constr.changeStatus({id,status:sta}).then(res=>{
								console.log(res,'更改状态')
								if(res.code==1){
									uni.showToast({
										title:'更改成功',
										icon:'none'
									})
									this.getProgList()
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.progressList{
		.topBg{
			width: 100%;
			height: 470rpx;
			position: absolute;
			top: 0;
			left: 0;
			image{
				width: 100%;
				height: 470rpx;
			}
			.topInfo{
				position: absolute;
				left: 0;
				bottom: 62rpx;
				width: 100%;
				padding: 0 32rpx;
				.title{
					.title_top{
						font: 500 40rpx/52rpx PingFang SC;
						color: #fff;
						display: flex;
						justify-content: space-between;
						image{
							width: 56rpx;
							height: 56rpx;
							border-radius: 50%;
						}
					}
					p{
						margin-top: 12rpx;
						font: 400 26rpx/40rpx PingFang SC;
						color: #A0A0A0;
					}
				}
				.progress{
					margin-top: 42rpx;
					progress{
						color: #FFCE0D;
					}
				}
			}
		}
		.content{
			padding: 60rpx 32rpx 0 32rpx;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			margin-bottom: 40rpx;
			background-color: #fff;
			.step{
				display: flex;
				justify-content: space-between;
				font: 500 30rpx/40rpx PingFang SC;
				color: #0A0605;
				span{
					font: 400 26rpx/40rpx PingFangSC-Regular;
					color: #A0A0A0;
				}
			}
			.stepProgress{
				display: flex;
				padding-top: 40rpx;
				justify-content: space-between;
				
				.right{
					padding-top: 1rpx;
					display: flex;
					flex-direction: column;
					.btn{
						width: 128rpx;
						height: 44rpx;
						background-color: #8BC37A;
						font: 400 22rpx/44rpx PingFang SC;
						color:#fff;
						border-radius: 22rpx;
						margin:12rpx 0 76rpx 0;
						border: 2rpx solid #8BC37A;
					}
					.active{
						background-color: #fff;
						color: #8BC37A;
					}
				}
			}
			
		}
		
	}
</style>
<u-steps :list="numList" direction="column" active-color="#8BC37A" :current="1"></u-st